<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp1800 template" content="My 1800 App">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>



</style>

<body>
    <!-- 导航栏 -->
     <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            
                
                <a class="navbar-brand" href=" ">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="index copy.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="energy.html">New Energy Articles</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="man.html">New Energy Technologies</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="new energy.html">New Energy Creations</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="sun.html">Mini Quizzes On New Energy Knowledge</a>
                        </li>
                    </ul>
               

                    <!-- 登录表单 - 移动到导航栏右侧 -->
                    <form class="d-flex">
                        <div class="input-group">

                            <button class="btn btn-primary btn-sm" type="button" id="button1">Sign in</button>
                        </div>
                    </form>
               
            </div>
    </nav>
    </div>
    <div id="carouselExample" class="carousel slide">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="./images/New energy articles.jpg " class="carousel slide w-60 "
                    style="display: 100px;height: 100px;right: 20px;" alt="...">
            </div>
            <div class="carousel-item active">
                <img src="./images/New energy articles2.jpg" class="d-block w-60 " style="display: 100px;height: 100px;"
                    alt="...">
            </div>
            <div class="carousel-item active">
                <img src="./images/New energy articles3.jpg " class="d-block w-60 "
                    style="display: 100px;height: 100px;" alt="...">
            </div>
            <div class="carousel-item active">
                <img src="./images/New energy articles4.jpg" class="d-block w-60 " style="display: 100px;height: 100px;"
                    alt="...">

            </div>
            <button class="carousel-control-prev " type="button" data-bs-target="#carouselExample" data-bs-slide="prev"
                style="left: -60px;">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"
                style="right: 2000px;">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        <div class="container px-4 py-5" id="featured-3"
            data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6">
            <h2 class="pb-2 border-bottom" data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                data-immersive-translate-paragraph="1"></h2>
            <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"
                data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6">
                <div class="feature col" data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6">
                    <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"> <svg class="bi"
                            width="1em" height="1em" aria-hidden="true">
                            <use xlink:href="#collection"></use>
                        </svg> </div>
                    <h3 class="fs-2 text-body-emphasis"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">New Energy Articles</h3>
                    <p data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">
                        Role: Disseminate knowledge about new energy and raise public awareness to drive policy support.
                        Necessity: With the global energy transition accelerating, new energy articles can guide societal focus on sustainable development and promote green consumption and investment.
                        of words.</p> <a href="#" class="icon-link"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">
                        Call to action
                        <svg class="bi" aria-hidden="true">
                            <use xlink:href="#chevron-right"></use>
                        </svg> </a>
                </div>
                <div class="feature col" data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6">
                    <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"> <svg class="bi"
                            width="1em" height="1em" aria-hidden="true">
                            <use xlink:href="#people-circle"></use>
                        </svg> </div>
                    <h3 class="fs-2 text-body-emphasis"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">New Energy Technologies</h3>
                    <p data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">
                        Role: Advance clean energy technology, improve energy efficiency, and reduce carbon emissions.
                        Necessity: Traditional energy sources are unsustainable, making new energy technologies (e.g., solar, wind, energy storage, hydrogen) critical for addressing climate change and ensuring energy security.
                        .</p> <a href="#" class="icon-link"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">
                        Call to action
                        <svg class="bi" aria-hidden="true">
                            <use xlink:href="#chevron-right"></use>
                        </svg> </a>
                </div>
                <div class="feature col" data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6">
                    <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"> <svg class="bi"
                            width="1em" height="1em" aria-hidden="true">
                            <use xlink:href="#toggles2"></use>
                        </svg> </div>
                    <h3 class="fs-2 text-body-emphasis"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">New Energy Creations</h3>
                    <p data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">
                        Role: Optimize energy systems, create new business models, and accelerate industrial upgrades.
                        Summary: New energy articles raise awareness, new energy technology provides solutions, and new energy innovation ensures implementation—together, they propel the global energy transition.
                    </p> <a href="#" class="icon-link"
                        data-immersive-translate-walked="88468342-a409-4604-8a5b-045fc65c39b6"
                        data-immersive-translate-paragraph="1">
                        Call to action
                        <svg class="bi" aria-hidden="true">
                            <use xlink:href="#chevron-right"></use>
                        </svg> </a>
                </div>
            </div>
        </div>
        <!-- 页面主要内容 -->
        <main class="container mt-4">
            <!-- 这里放你原来的页面内容 -->
        </main>

        <!-- Bootstrap JS -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script>
        <!-- 其他脚本 -->
        <script src="./scripts/script.js"></script>
</body>

</html>